<script setup lang="ts">
import { theme } from 'ant-design-vue'
import useMainInvoke from './hooks/useMainInvoke'
import { useGlobalStore } from './store'

const fontFamily = `
    Smiley,
    Roboto,
    -apple-system,
    BlinkMacSystemFont,
    'Helvetica Neue',
    'Segoe UI',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Open Sans',
    sans-serif;
`

const route = useRoute()

const caches = ref([] as string[])

watch(
  () => route.matched,
  (matched) => {
    const [{ name }] = matched
    caches.value.push(name as string)
  },
  {
    flush: 'pre'
  }
)

const onTransitionEnd = () => {
  caches.value = route.matched.map((_route) => _route.name as string)
}

const { workspace } = useGlobalStore()
useMainInvoke('check', 'gitignore', { path: workspace })
</script>

<template>
  <a-config-provider
    :theme="{
      algorithm: theme.darkAlgorithm,
      token: {
        fontFamily,
        fontSize: 16
      }
    }"
  >
    <router-view v-slot="{ Component }">
      <transition :name="route.meta.transition as string" mode="out-in" @after-enter="onTransitionEnd">
        <!-- :include="caches" :exclude="omits" -->
        <KeepAlive :max="1" :include="caches">
          <component :is="Component" />
        </KeepAlive>
      </transition>
    </router-view>
  </a-config-provider>
</template>

<style lang="less">
@import './assets/css/styles.less';
</style>
